MCP 是什麼?

MCP，全名 Model Context Protocol，是一種開放協議，用來標準化應用程式如何向大型語言模型（LLMs）提供上下文。

可以把 MCP 想像成日常在使用的 USB-C。USB-C 提供一種標準化接口，讓你的裝置能夠連接各種周邊和配件一樣，而 MCP 也提供標準化的方式，讓 AI 模型能夠連接不同的資料來源與工具。

▲ 圖片來源：Norah Sakal - What is Model Context Protocol (MCP)? How it simplifies AI integrations compared to APIs

像是上面這張圖，在 LLM 上需要讀取到更準確的資訊，需要 MCP 連結說明文件來提供模型更準確的預測資料，幫助我們在開發上更順手，減少自動提示出現錯誤的機會。

懶人安裝方式

臨時來加個更新

在撰寫文章的同時，突然釋出 1.0 版本，脫離 Beta 啦～ 🎉

可以依據使用的編輯器來安裝

在 Cursor 上註冊 Animate UI MCP

這邊分為兩種方式，一種是只需要在這個專案上使用 Animate UI，另一種是將 MCP 套用到所有使用 Cursor 的專案中。

套用於 Cursor (對所有專案皆有效)

1. 打開 Cursor 設定
   

2. 點選 MCP & Intergrations > Add Custom MCP
   

3. 修改 JSON mcpServers 如下，存檔後等候約幾秒後，即可使用

   {
       "mcpServers": {
           "animate-ui": {
           "command": "npx",
           "args": ["-y", "shadcn@canary", "registry:mcp"],
           "env": {
               "REGISTRY_URL": "https://animate-ui.com/r/registry.json"
           }
           }
       }
   }
   

   

   若有成功套用，可以看到 4 tools enabled。

套用於單一專案

1. 在專案中新增 .cursor/mcp.json 檔案

2. 修改 JSON mcpServers 如下，存檔後等候約幾秒後，即可使用

   {
       "mcpServers": {
           "animate-ui": {
           "command": "npx",
           "args": ["-y", "shadcn@canary", "registry:mcp"],
           "env": {
               "REGISTRY_URL": "https://animate-ui.com/r/registry.json"
           }
           }
       }
   }
   

如何測試可以抓取到資料

可以在 Prompt 中下：

use animate-ui mcp and give me a list of all components available

若有抓到元件，呈現的內容大致上如下，但並不會完全一樣的說明文字。

對比有無 MCP 在編輯器上的差別

在這邊我使用 day1 所建立的專案，並且想要將背景換成 Animate UI 的 Hole Background。

Prompt:

use animate-ui mcp and change background to Hole Background with numberOfDiscs set to 20

▲ 上圖是有 MCP 時的結果，▼ 下圖是沒有 MCP 時的結果。

可以看到我將兩個近似的 Prompt 同樣輸入後，有 MCP 連接 Animate UI 的可以很準確的知道我想要的操作是什麼 ; 而沒有 MCP 的，開始 npm 安裝 animate-ui???，或是可能開始查詢，並且無法精準的答復，或是模型根據過去訓練資料進行生成，這可能讓開發者在開發時增加更多困擾。

Prompt 的部分差別在於我把 "mcp" 三個字移除(若沒有的話，prompt 會跳錯)

小結

今天將 Animate UI 的 MCP 設定完成，若想要讓 Cursor 也可以讀取到 shadcn 的 MCP，也可以至 Shadcn ui - MCP 進行設定(最近才剛更新的功能🤣 shadcn-changelog)。

Reference

• Shadcn/ui Docs
• Animate UI Docs